<template>
	<div class="mask" v-if="showMask" :style="{ '--time': option.duration + 'ms' }">
		<Transition name="card">
			<div v-if="visible" class="card">
				<div class="title">提示</div>
				<div class="content">{{ option.content }}</div>
				<div class="submit-btn" @click="handleButtonClick">{{ option.buttonText || '知道了' }}</div>
			</div>
		</Transition>
	</div>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue';

interface Option {
	content: string;
	duration?: number;
	buttonText?: string;
	onButtonClick?: () => void; // 添加点击按钮的回调函数属性
}

const visible = ref(false);
const showMask = ref(false);
const defaultOption: Option = {
	content: '',
	duration: 300,
	buttonText: '知道了',
	onButtonClick: undefined
};

const option = ref<Option>(defaultOption);

const show = (_option: Option) => {
	option.value = Object.assign({}, defaultOption, _option);
	showMask.value = true;
	nextTick(() => {
		visible.value = true;
	});
};

const hide = () => {
	visible.value = false;
	setTimeout(() => {
		showMask.value = false;
	}, option.value.duration);
};

const handleButtonClick = () => {
	if (option.value.onButtonClick) {
		option.value.onButtonClick(); // 执行回调函数
	}
	hide(); // 隐藏组件
};

defineExpose({
	show,
	hide
});
</script>

<style lang="less" scoped>
.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;

	.card {
		width: 262px;
		background: #fff;
		border-radius: 12px;
		text-align: center;
		padding-bottom: 20px;

		.title {
			font-size: 16px;
			line-height: 19px;
			color: #000;
			margin-top: 24px;
		}

		.content {
			margin-top: 10px;
			padding: 0 20px;
			color: #333;
			line-height: 21px;
		}

		.submit-btn {
			margin: 37px auto auto;
			width: 134px;
			height: 36px;
			line-height: 36px;
			text-align: center;
			background: #217dfe;
			border-radius: 100px;
			color: #fff;
		}
	}

	.card-enter-from {
		opacity: 0;
		transform: scale(0);
	}

	.card-enter-active {
		transition: all var(--time) ease-out;
	}

	.card-leave-active {
		transition: all var(--time) linear;
	}

	.card-leave-to {
		opacity: 0;
		transform: scale(0);
	}
}
</style>
